<div class="pos" [@expandShrink]="isExpand ? 'expand' : 'shrink'">
    <div class="expand-btn" (click)="cardToggle()" draggable="true">
        <!-- <i nz-icon  nzType="to-top" nzTheme="outline"></i> -->
        <i *ngIf="isExpand" nz-icon nzType="caret-down" nzTheme="outline"></i>
        <i *ngIf="!isExpand" nz-icon nzType="caret-up" nzTheme="outline"></i>
    </div>
    <div class="box">
        <div class="boxLeft">
            <p class="title"><i></i>当前办理</p>
            <ng-container *ngIf="name!='addclue'&&name!='addhandle'">
                <div class="fileP">
                    <nz-select appBtnPermiss [permissId]="btnPerssion.choice" style="width: 150px;vertical-align: middle" [(ngModel)]="DocumentId" (ngModelChange)="docSelect($event)" name="xzmb" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                        <nz-option *ngFor="let doc of DocumentList" [nzValue]="doc.filetype" [nzLabel]="doc.filetype">{{doc.filetype}}</nz-option>
                    </nz-select>
                    <button appBtnPermiss [permissId]="btnPerssion.insert" *ngIf="DocumentId!='其他'" (click)="newDocuments()">新建文书</button>
                    <button appBtnPermiss [permissId]="btnPerssion.upload" *ngIf="DocumentId=='其他'" (click)="showModalUpload('bizfile')"> 上传文书 </button>
                    <span>
                      <button appBtnPermiss [permissId]="btnPerssion.evidence" (click)="showModalUpload('evidence')">上传证据</button>
                    </span>
                </div>
            </ng-container>
            <table>
                <thead>
                    <tr>
                        <td width="10%">序号</td>
                        <td>名称</td>
                        <td>文件类型</td>
                        <td width="30%">操作</td>
                    </tr>
                </thead>
                <!-- 审批框 -->
                <tbody>
                    <tr *ngFor="let item of dataList;let index=index;">
                        <td>{{index+1}}</td>
                        <td class="text-left" style="padding-left: 10px;">
                            <i><img src="/assets/image/wenbook.png" alt=""></i>
                            <a>{{item.filename}}</a>
                            <div class="badge" [ngClass]="item.approveStatus == '已审批'?'badge-done':'badge-success'">{{item.approveStatus}}</div>
                        </td>
                        <td>{{item.doctype}}</td>
                        <!-- <td class="textHidden">
                        <p title="备注信息字段占位…">{{item.remarks}}</p>
                    </td> -->
                        <!-- 终端对接判断逻辑需要加文书来源判断 -->
                        <td class="btnAlign">
                            <!-- 线索推过来不可编辑 -->
                            <ng-container *ngIf="item.doctype!=='其他'&&type!=='approval'">
                                <ng-container *ngIf="(!item.approve)">
                                    <ng-container *ngIf="name!='edithandle' && item.doctype!='案源信息登记表';else elseBlock">
                                        <button><a href="javascript:void(0)" (click)="handleEdit(item.docid,item.doctype)">编辑</a> </button>
                                    </ng-container>
                                    <ng-template #elseBlock>
                                        <ng-container *ngIf="item.doctype=='案源信息登记表' && !clueId">
                                            <button><a href="javascript:void(0)" (click)="handleEdit(item.docid,item.doctype)">编辑</a> </button>
                                        </ng-container>
                                    </ng-template>
                                </ng-container>
                            </ng-container>

                            <button appBtnPermiss [permissId]="btnPerssion.download"> <a  class='a_download'  (click)="downLoad(item.fileid,item.filename,'bizfile')">下载</a></button>
                            <ng-container *ngIf="item.doctype!=='其他'">
                                <button appBtnPermiss [permissId]="btnPerssion.approval" *ngIf="item.approveStatus=='待审批'"><a (click)="approval(item.docid,item.doctype)">审批</a></button>
                            </ng-container>
                            <ng-container *ngIf="item.doctype!='案件来源登记表'">
                                <button class="deltel" *ngIf="(!item.approve) " (click)="deleteBizfile(item.fileid)">删除</button>
                            </ng-container>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table *ngIf="name!='addclue'&&name!='addhandle'">
                <tbody>
                    <tr *ngFor="let item of fileList;let i= index;">
                        <td width="10%">{{i+1}}</td>
                        <td class="text-left" style="padding-left: 10px;">
                            <i><img src="/assets/image/wenbook.png" alt=""></i>
                            <a href='/evidenceApi/evidence/file/{{item.fileId}}'>{{item.fileName}}</a>
                            <div class="badge" [ngClass]="item.approveStatus == '已审批'?'badge-done':'badge-success'">{{item.approveStatus}}</div>
                        </td>
                        <td class="btnAlign" width="30%">
                            <!-- <button *ngIf="((item.contentType).includes('video'))||((item.contentType).includes('audio'))||((item.contentType).includes('image'))"><a (click)="showModal(item.contentType,item.fileId,'evidence')">查看</a> </button> -->
                            <button appBtnPermiss [permissId]="btnPerssion.download"><a  class='a_download' (click)="downLoad(item.fileId,item.fileName,'evidence')" >下载</a></button>
                            <button appBtnPermiss [permissId]="btnPerssion.delete"><a style="color: red" (click)="deleteEvidence(item.id)">删除</a></button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <nz-modal [(nzVisible)]="isVisible" nzMaskClosable="false" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
                <ng-template #modalTitle>
                    证据详情
                </ng-template>

                <ng-template #modalContent>
                    <!-- 文件类型为视频 -->
                    <div *ngIf="publictypeFlagVideo">
                        <vg-player>
                            <video id="my-video" #video [vgMedia]="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1280px" height="720px" data-setup="{}" autoplay>
                            <source [src]="url"  >
                            <p class="vjs-no-js">播放视频需要启用JavaScript，推荐使用支持HTML5的浏览器访问。
                                To view this video please enable JavaScript, 
                                and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">
                                supports HTML5 video</a>
                            </p>
                       </video>
                        </vg-player>
                    </div>
                    <div *ngIf="publictypeFlagAudio">
                        <vg-player style="height: 50px;" (onPlayerReady)="onPlayerReady($event)">
                            <vg-controls vgFor='myAudio'>
                                <vg-play-pause></vg-play-pause>
                                <vg-playback-button></vg-playback-button>

                                <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                                <vg-scrub-bar>
                                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                    <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                                </vg-scrub-bar>

                                <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                                <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

                                <vg-mute></vg-mute>

                                <vg-fullscreen></vg-fullscreen>
                            </vg-controls>

                            <audio #audio class="audio" [vgMedia]="audio" id='myAudio' type='audio/mp3' autoplay=false preload="auto">
                              <source [src]="url">
                          </audio>
                        </vg-player>
                    </div>
                    <div *ngIf="publictypeFlagImage">
                        <div>
                            <img [src]="url" alt="" style="display: block;width:100%;height:100%;">
                        </div>
                    </div>
                    <div class="example" *ngIf="loading">
                        <nz-spin nzSimple [nzSize]="'large'" nzTip="请稍等..." [nzSpinning]="loading"></nz-spin>
                    </div>
                </ng-template>

                <ng-template #modalFooter>
                    <button nz-button nzType="primary" (click)="handleCancel()">关闭</button>
                </ng-template>
            </nz-modal>
            <nz-modal [(nzVisible)]="isVisibleUpload" nzZIndex="-1" nzWidth="800" nzMaskClosable="false" [nzTitle]="modalTitleUpload" [nzContent]="modalContentUpload" [nzFooter]="modalFooterUpload" (nzOnCancel)="handleCancelUpload()">


                <ng-template #modalTitleUpload>
                    <span appBtnPermiss [permissId]="btnPerssion.evidence" *ngIf="choose == 'evidence'">证据上传</span>
                    <span appBtnPermiss [permissId]="btnPerssion.upload" *ngIf="choose == 'bizfile'">文书上传</span>
                </ng-template>

                <ng-template #modalContentUpload>
                    <!-- 视频控件 -->
                    <p class=uploadTitle>
                        <span>案件环节：</span>
                        <nz-select style="width: 150px;vertical-align: middle;border-radius: 0;" name="uploadEvidence" [(ngModel)]="currentLinkUpload" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                            <!-- <nz-option [nzValue]="clueOrigin.value" [nzLabel]="clueOrigin.name" *ngFor="let clueOrigin of clueOriginList"></nz-option> -->
                            <nz-option nzValue="线索" nzLabel="线索"></nz-option>
                            <nz-option nzValue="立案" nzLabel="立案"></nz-option>
                            <nz-option nzValue="调查取证" nzLabel="调查取证"></nz-option>
                            <nz-option nzValue="处罚决定" nzLabel="处罚决定"></nz-option>
                            <nz-option nzValue="执行与结案" nzLabel="执行与结案"></nz-option>
                            <nz-option nzValue="强制执行" nzLabel="强制执行"></nz-option>
                        </nz-select>
                        <span style="height: 32px;margin-left: 10px;background: #31C374;" class="uploadfile">
                            <nz-upload
                            nzDisabled="{{!currentLinkUpload}}"
                            nzAction="###"
                            [nzShowUploadList]=false
                            [nzCustomRequest]="customReq">
                                <div class="ant-upload-text" style="color: #fff;">
                                  <ng-container appBtnPermiss [permissId]="btnPerssion.evidence" *ngIf="choose == 'evidence'">上传证据</ng-container>
                                  <ng-container appBtnPermiss [permissId]="btnPerssion.upload" *ngIf="choose == 'bizfile'">上传文书</ng-container>
                                </div>
                            </nz-upload>
                        </span>
                    </p>
                    <table style="width: 100%;" class='uploadModal'>
                        <thead style="border-bottom: 1px solid #ddd;">
                            <tr>
                                <td width="15%" align="center">序号</td>
                                <td>名称</td>
                                <td>所属环节</td>
                                <td width="25%">操作</td>
                            </tr>
                        </thead>

                        <tbody *ngIf="choose =='evidence'">
                            <tr *ngFor="let item of fileList;let i= index;">
                                <td width="10%" align="center">{{i+1}}</td>
                                <td>
                                    <i><img src="/assets/image/wenbook.png" alt=""></i>
                                    <a class='changedTag' (click)="changeTag(i,item)">{{item.fileName}}</a>
                                </td>
                                <td width='15%'>{{item.filingLink}}</td>
                                <td class="btnAlign" width="30%">
                                    <button class="modify" [hidden]="fileNameIndex == i" (click)="changeTag(i,item)"><a>修改</a></button>
                                    <button class="save" [hidden]="fileNameIndex != i" #save (click)="saveName(i,item)"><a>保存</a></button>
                                    <button class="delete"><a style="color: red" (click)="deleteFile(item.id)">删除</a></button>
                                </td>
                            </tr>
                        </tbody>

                        <tbody *ngIf="choose =='bizfile'">
                            <tr *ngFor="let item of bizfileListOther;let i= index;">
                                <td width="10%" align="center">{{i+1}}</td>
                                <td>
                                    <i><img src="/assets/image/wenbook.png" alt=""></i>
                                    <a class='changedTag' (click)="changeTag(i,item)">{{item.filename}}</a>
                                </td>
                                <td width='15%'>{{item.stage}}</td>
                                <td class="btnAlign" width="30%">
                                    <button class="modify" [hidden]="fileNameIndex == i" (click)="changeTag(i,item)"><a>修改</a></button>
                                    <button class="save" [hidden]="fileNameIndex != i" #save (click)="saveName(i,item)"><a>保存</a></button>
                                    <button class="delete"><a style="color: red" (click)="deleteFile(item.fileid)">删除</a></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="example" *ngIf="loading">
                        <nz-spin nzSimple [nzSize]="'large'" nzTip="请稍等..." [nzSpinning]="loading"></nz-spin>
                    </div>
                </ng-template>

                <ng-template #modalFooterUpload style="text-align: center">
                    <button nz-button nzType="default" (click)="handleCancelUpload()">关闭</button>
                </ng-template>
            </nz-modal>
        </div>
        <div class="boxRight">
            <p class="title"><i></i>下一步</p>

            <div class="boxRightContent">

                <p class='boxRightItem'>
                    <label for="">
                    <!-- <select name="" id="">
                        <option value="0">部门字段占位</option>
                    </select> -->
                    <span>办理事项：</span> 
                    <nz-select style="width: 620px;" name="xzmb" [(ngModel)]="currentLink" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                        <!-- <nz-option [nzValue]="clueOrigin.value" [nzLabel]="clueOrigin.name" *ngFor="let clueOrigin of clueOriginList"></nz-option> -->
                        <nz-option nzValue="立案" nzLabel="立案"></nz-option>
                        <nz-option nzValue="不立案" nzLabel="不立案"></nz-option>
                        <nz-option nzValue="暂不立案" nzLabel="暂不立案"></nz-option>
                        <nz-option nzValue="并案" nzLabel="并案"></nz-option>
                        <nz-option nzValue="移送" nzLabel="移送"></nz-option>
                        <nz-option nzValue="交办" nzLabel="交办"></nz-option>
                        <nz-option nzValue="处罚决定" nzLabel="处罚决定"></nz-option>
                        <nz-option nzValue="结案" nzLabel="结案"></nz-option>
                        <nz-option nzValue="销案" nzLabel="销案"></nz-option>
                        <nz-option nzValue="审批" nzLabel="审批"></nz-option>
                        <nz-option  nzCustomContent='true' nzValue="核查" nzLabel="核查">
                            <span class='lindao' >核查</span>
                        </nz-option>
                        <nz-option class='lindao' nzCustomContent='true' nzValue="继续办理" nzLabel="继续办理">
                            <span class='lindao' >继续办理</span>
                        </nz-option>
                        <nz-option class='lindao' nzCustomContent='true' nzValue="移送" nzLabel="移送">
                            <span class='lindao'>移送</span>
                        </nz-option>
                        <nz-option class='lindao' nzCustomContent='true' nzValue="交办" nzLabel="交办">
                            <span class='lindao' >交办</span>
                        </nz-option>
                        <nz-option class='lindao' nzCustomContent='true' nzValue="退回" nzLabel="退回">
                            <span class='lindao'>退回</span>
                        </nz-option>
                        <nz-option class='lindao' nzCustomContent='true' nzValue="审批" nzLabel="审批">
                            <span class='lindao'>审批</span>
                        </nz-option>
                    </nz-select>
                </label>
                </p>
                <p  class='boxRightItem'>
                    <label for="">
                    <span>提交审批：</span>      
                    <nz-select  nzMode="tags" style="width: 620px;" nzPlaceHolder="请选择审批文书" [(ngModel)]="listOfTagOptions" [nzSuffixIcon]='icon'>
                        <nz-option  *ngFor="let item of bizfileList;let index=index;"  [nzLabel]="item.doctype" [nzValue]="item.docid"></nz-option>
                    </nz-select>
                </label>
                </p>
                <p  *ngIf="currentLink !== '结案'" class='boxRightItem'>
                    <label for="">
                    <span>选择人员：</span>
                    <nz-tree-select
                    style="width: 270px;margin-right: 5px"
                    nzPlaceHolder="请选择组织"
                    [nzDefaultExpandedKeys]="expandKeys"
                    [nzDropdownMatchSelectWidth]="true"
                    [nzDropdownStyle]="{ 'max-height': '300px' }"
                    [(ngModel)]="targetOrg"
                    [nzNodes]="nodes"
                    [nzAsyncData]="true"
                    (ngModelChange)="getSelectedNodeList($event)"
                    >
                    </nz-tree-select>
                        <nz-select
                            style="width: 140px;margin-right: 5px" 
                            name="xzmb" 
                            [nzSuffixIcon]='icon' 
                            nzAllowClear 
                            nzPlaceHolder="请选择"
                            [(ngModel)] = "selectedValue"
                            (ngModelChange) = "getSelectedValue($event)"
                        >
                            <nz-option *ngFor="let o of listOfOption" [nzLabel]="o.deptName" [nzValue]="o.deptId"> </nz-option>
                        </nz-select>
                        
                        <nz-select 
                            style="width:200px;margin-right: 5px" 
                            name="person"  
                            [nzMaxTagPlaceholder]="tagPlaceHolder"
                            [nzSuffixIcon]='icon' 
                            nzAllowClear 
                            [nzMaxTagCount]="1"
                            nzPlaceHolder="请选择"
                            nzMode = 'multiple'
                            [(ngModel)] = "selectedPersonValue"
                            (ngModelChange) = "selectedPerson($event)"
                        >
                            <nz-option *ngFor="let o of personOptionList" [nzLabel]="o.realName" [nzValue]="o.userId"> </nz-option>
                        </nz-select>
                        <ng-template #tagPlaceHolder let-selectedList>...</ng-template>
                </label>
                </p>
                <p class='boxRightItem'>
                    <label>
                    <span>备注：</span> <input type="text" [(ngModel)]="remark" style="width: 620px" placeholder="备注信息">
                </label>
                </p>
                <p style="padding-left: 65px;
                line-height: 40px;
                height: 40px;
                margin-top:10px;">
                    <button class="highLight"  *ngIf="currentLink != '结案'"  (click)="mysubmit()">提交</button> 
                    <button (click)="back()" *ngIf="currentLink != '结案'">返回</button> 
                    <button class="btnDanger"  (click)="completion()"  appTooltip text='执行结案归档操作，该案件增删改操作将禁用，请注意该操作不可逆。'  *ngIf="currentLink == '结案'" >结案归档</button>

                </p>   
            </div>
        </div> 
        <!-- //模板 -->
        <ng-template #icon>
            <i nz-icon nzType="caret-down" nzTheme="outline"></i>
        </ng-template>
    </div>
</div> 